<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>WebDeploy-远程文件管理工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <form class="layui-form layui-form-pane">
                <div class="layui-row">
                    <div class="layui-col-md2">
                        <select name="env" id="serverGroup" lay-verify="" lay-search>
                            <option value="" disabled></option>
                        </select>
                    </div>
                    <div class="layui-col-md2">
                        <select name="title" id="serverTitle" lay-verify="" lay-search>
                            <option value="" disabled></option>
                        </select>
                    </div>
                    <div class="layui-col-md6">
                        <input type="text" name="serverPath" id="serverPath" required lay-verify="required"
                               placeholder="请输入服务器路径" autocomplete="on" class="layui-input">
                    </div>
                    <div class="layui-col-md2">
                        <button type="button" class="layui-btn layui-btn-primary" id="btn1"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        <button type="reset" class="layui-btn layui-btn-danger" id="btn2"  lay-submit lay-filter="data-search-btn"> 重 置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
</div>
</div>

<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="download">下载</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'laydate', 'layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer,
            table = layui.table;

        layer.tips('如果根目录可能数量过大,请谨慎！', '#btn1');

        //init select
        $.ajax({
            url: "/deploy/getServerEnv", type: "get", async: false, success: function (result) {
                let dataJson = JSON.parse(result);
                if (dataJson.code == 200) {
                    $.each(dataJson.data.serverGroup, function (index, item) {
                        $('#serverGroup').append(new Option(item, item));// 下拉菜单里添加元素
                    });
                    $.each(dataJson.data.serverTitle, function (index, item) {
                        $('#serverTitle').append(new Option(item, item));// 下拉菜单里添加元素
                    });
                    form.render('select');
                } else {
                    layer.msg("加载环境信息失败！");
                }
            }
        });

        table.render({
            elem: '#currentTableId',
            toolbar: '#demo',
            defaultToolbar: ['filter', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            url: "/deploy/getFiles",
            cols: [
                [
                    {type: "checkbox", width: 50},
                    {field: 'file', title: '文件名称', sort: true},
                    {field: 'path', title: '路径', sort: true},
                    {field: 'group', title: '分组', sort: true},
                    {field: 'title', title: '标签', sort: true},
                    {field: 'host', title: '地址', sort: true},
                    {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                ]
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: false,
            skin: 'line'
            , parseData: function (res) {
                return {
                    "code": 0,
                    "data": res.data
                };
            }
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            data.field.curr =1;
            table.reload('currentTableId', {
                where:data.field
                ,parseData: function(res) {
                    return {
                        "code": 0,
                        "data": res.data
                    };
                }
            });
            return false;
        });

        //删除或下载
        table.on('tool(currentTableFilter)', function (obj) {
            let path = obj.data.path;
            if (obj.event === 'download') {
                layer.confirm(path+'\n \t真的要下载吗?', function (index) {
                    download(obj.data);
                    layer.close(index);
                });
            } else if (obj.event === 'delete') {
                layer.confirm(path+'\n \t真的要删除吗?', function (index) {
                    del(obj);
                    layer.close(index);
                });
            }
        });
        
        function download(data) {
            let form = document.createElement("form");
            form.action = "/deploy/getFile?host="+data.host+"&path="+data.path;
            form.method = "post";
            form.target = "_blank";
            form.style.display = 'none';
            form.enctype='application/json';
            document.body.appendChild(form);
            form.submit();
        }

        function del(obj) {
            let files = new Array();
            files.push(obj.data.path);
            $.ajax({
                url: "/deploy/delFiles?host="+obj.data.host+"&files="+files,
                type: "POST",
                async: false,
                data:{"files":files},
                success: function (result) {
                    let dataJson = JSON.parse(result);
                    if (dataJson.code == 200) {
                        layer.msg("删除成功！");
                        obj.del();
                    } else {
                        layer.msg(dataJson.msg);
                    }
                }
            });
        }
    });
</script>

</body>
</html>